<template>
  <div class="staffRank">
    <div class="bgg">
      <div class="card_title">
        员工排行
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
        <div class="h24">
          <div class="flex row_bet flex_wrap">
            <a-radio-group v-model="status" style="margin-bottom: 5px;margin-left:5px;" @change="statusChange">
              <a-radio-button :value="0">
                所有员工
              </a-radio-button>
              <a-radio-button :value="1">
                在职员工
              </a-radio-button>
              <a-radio-button :value="2">
                离职员工
              </a-radio-button>
              <a-radio-button :value="3">
                异常员工
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div class="flex row_left flex_wrap">
          <a-range-picker
            :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
            format="YYYY-MM-DD"
            @change="passChange"
            style="width:230px;margin-right: 5px;margin-bottom: 5px;"
          >
            <div
              class="flex row_around col_center"
              style="height:30px;border: 1px solid rgb(232, 233, 234);border-radius: 4px;background-color: #ffffff">
              <span class="m_l_10">{{ pass }}</span>
              <a-icon type="calendar" style="float: right;"/>
            </div>
          </a-range-picker>
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="index" slot-scope="text, row,index">
          <span
            class="index"
            :style="{
              backgroundColor:index<3? '#314659':'#f5f5f5',
              color:index<3? '#ffffff':'#101010',
            }">{{ index+1 }}</span>
        </div>
        <div slot="is_work" slot-scope="row">
          {{ row.is_work === 1 ? '在职':'离职' }}
        </div>
        <div slot="perGoals" slot-scope="row">
          <a-progress :percent="parseInt(Number(row.month_preServiceFee) / Number(row.perGoals))" :show-info="false"/>
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
  import { getWebWorkRank } from '@/api/admin/staff'
  import moment from 'moment'

  export default {
    name: 'StaffRank',
    data () {
      return {
        moment,
        status: 0,
        columns: [
          {
            title: '排名',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '用户',
            // width: 150,
            align: 'center',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '入职时间 ',
            align: 'center',
            dataIndex: 'useTime',
            scopedSlots: {
              customRender: 'useTime'
            }
          },
          {
            title: '昨天',
            align: 'center',
            // width: 500,
            dataIndex: 'yesterday_preServiceFee',
            scopedSlots: {
              customRender: 'yesterday_preServiceFee'
            }
          },
          {
            title: '前天',
            align: 'center',
            dataIndex: 'before_preServiceFee',
            scopedSlots: {
              customRender: 'before_preServiceFee'
            }
          },
          {
            title: '大前天',
            align: 'center',
            dataIndex: 'max_before_preServiceFee',
            scopedSlots: {
              customRender: 'max_before_preServiceFee'
            }
          },
          {
            title: '本周预估',
            align: 'center',
            dataIndex: 'week_preServiceFee',
            scopedSlots: {
              customRender: 'week_preServiceFee'
            }
          },
          {
            title: '本月预估',
            align: 'center',
            dataIndex: 'month_preServiceFee',
            scopedSlots: {
              customRender: 'month_preServiceFee'
            }
          },
          {
            title: '上月预估',
            align: 'center',
            dataIndex: 'top_month_preServiceFee',
            scopedSlots: {
              customRender: 'top_month_preServiceFee'
            }
          },
          {
            title: '本周结算',
            align: 'center',
            dataIndex: 'week_cmServiceFee ',
            scopedSlots: {
              customRender: 'week_cmServiceFee '
            }
          },
          {
            title: '本月结算',
            align: 'center',
            dataIndex: 'month_cmServiceFee',
            scopedSlots: {
              customRender: 'month_cmServiceFee'
            }
          },
          {
            title: '上月结算',
            align: 'center',
            dataIndex: 'top_month_cmServiceFee',
            scopedSlots: {
              customRender: 'top_month_cmServiceFee'
            }
          },
          {
            title: '今年预估',
            align: 'center',
            dataIndex: 'year_preServiceFee',
            scopedSlots: {
              customRender: 'year_preServiceFee'
            }
          },
          {
            title: '今年结算',
            align: 'center',
            dataIndex: 'year_cmServiceFee',
            scopedSlots: {
              customRender: 'year_cmServiceFee'
            }
          },
          {
            title: '时间段内预估',
            align: 'center',
            dataIndex: 'time_preServiceFee',
            scopedSlots: {
              customRender: 'time_preServiceFee'
            }
          },
          {
            title: '在职状态',
            align: 'center',
            // dataIndex: 'is_work',
            scopedSlots: {
              customRender: 'is_work'
            }
          },
          {
            title: '目标完成率',
            align: 'center',
            // dataIndex: 'perGoals',
            scopedSlots: {
              customRender: 'perGoals'
            }
          }
        ],
        activity: [
          // {
          //   id: 197, // 用户id
          //   user: '从雪艳', // 用户
          //   leave_gro_id: null,
          //   rank: '2',
          //   perGoals: '20000', // 目标
          //   teamName: '测试团队名称', // 队名
          //   useTime: '2017-10-16', // 入职时间
          //   before_preServiceFee: '1768.58', // 前天预估服务费
          //   yesterday_preServiceFee: '130.03', // 昨日预估服务费
          //   max_before_preServiceFee: '0.00', // 大前天预估服务费
          //   week_preServiceFee: '130.03', // 本周预估服务费
          //   month_preServiceFee: '1898.61', // 本月预估服务费
          //   month_cmServiceFee: '814.43', // 本月结算服务费
          //   top_month_preServiceFee: '4732.38', // 上月预估服务费
          //   top_month_cmServiceFee: '1953.95', // 上月结算服务费
          //   year_preServiceFee: '1898.61', // 本年预估服务费
          //   year_cmServiceFee: '814.43', // 本年结算服务
          //   time_preServiceFee: '0.00', // 时间段内预估服务费
          //   is_error: 1, // 1是 2否
          //   is_work: 1, // 1在职 2离职
          //   role: 2 // 1员工 2组长
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        btnloading: false,
        start: null,
        end: null,
        pass:
          moment().startOf('month').format('YYYY-MM-DD') +
          ' 至 ' +
          moment().format('YYYY-MM-DD')
      }
    },

    computed: {},
    created () {
      this.start = moment().startOf('month').unix()
      this.end = moment().endOf('month').unix()
      this.getWebWorkRank(1)
    },
    mounted () {
    },
    methods: {
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        this.getWebWorkRank(1)
        const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
        this.pass = str
      },
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < moment().subtract(1, 'days') || endValue > moment().add(30, 'days')
      },
      getWebWorkRank (page) {
        this.loading = true
        getWebWorkRank({
          page: page,
          pagesize: 15,
          status: this.status, // 1在职用户，2离职用户，3异常用户
          start: this.start,
          end: this.end
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWebWorkRank(params.page)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.status = e.target.value
        this.getWebWorkRank(1)
      }
    }
  }
</script>
<style lang="less" scoped>
  .staffRank {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }
  }
</style>
